<template>
  <a-form-item name="category" label="分类">
    <a-auto-complete
      v-model:value="formState.category"
      :options="tagCategoryOptions?.categoryList"
      placeholder="请输入分类"
    />
  </a-form-item>

  <a-form-item name="tags" label="标签">
    <a-select
      :options="tagCategoryOptions?.tagList"
      mode="tags"
      v-model:value="formState.tags"
      placeholder="请输入标签"
    />
  </a-form-item>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController.ts'

// 定义参数
const formState = defineModel()

// 定义标签option和分类option
const tagCategoryOptions = ref<API.PictureTagCategory>({})
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code != 0) {
    return
  }
  tagCategoryOptions.value.tagList = res.data.data.tagList.map((tag) => {
    return {
      label: tag,
      value: tag,
    }
  })

  tagCategoryOptions.value.categoryList = res.data.data.categoryList.map((category) => {
    return {
      label: category,
      value: category,
    }
  })
}

onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped lang="scss"></style>
